<template>
  <div><!-- 上部搜索条件区域 -->
     <el-card class="filter-card">
         <div slot="header">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>内容管理</el-breadcrumb-item>
            </el-breadcrumb>
         </div>
         <!-- 数据筛选表单 -->
       <el-form ref="form" :model="form" label-width="40px" size="mini">
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
             <el-radio :label="null">全部</el-radio>
             <el-radio :label="0">草稿</el-radio>
             <el-radio :label="1">待审核</el-radio>
             <el-radio :label="2">审核通过</el-radio>
             <el-radio :label="3">审核失败</el-radio>
             <el-radio :label="4">已删除</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="频道">
           <el-select v-model="form.channel" placeholder="请选择频道">
             <el-option v-for="channel in channels" :key="channel.id" :label="channel.name" :value="channel.id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="日期">
           <el-date-picker
              v-model="form.date"
              unlink-panels
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="goSearch">查询</el-button>
         </el-form-item>
       </el-form>
       <!-- /数据筛选表单 -->
     </el-card>
     <!-- 下部文章列表区域 -->
     <el-card class="box-card">
      <div slot="header" class="clearfix">
         根据筛选条件共查询到 {{total_count}} 条结果,当前是第{{curPage}}页：
      </div>
          <!-- 数据列表 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="list-table"
        size="mini"
      >
         <el-table-column
           prop="date"
           label="封面"
           width="180">
           <template slot-scope="scope">
            <!-- scope.row拿到的是当前完整的数据项 对象结构 -->
             <el-image
                style="width: 160px; height: 100px"
                :src="scope.row.cover.images[0]"
                >
                <div slot="error" class="image-slot">
                    <img src="../../assets/WechatIMG9的副本.jpeg" style="width: 160px; height: 100px">
                </div>
            </el-image>
            </template>
         </el-table-column>
         <el-table-column
           prop="title"
           label="标题"
           width="180">
         </el-table-column>
         <el-table-column
           prop="address"
           label="状态">
            <template slot-scope="scope">
            <el-button v-if="scope.row.status===null" disabled>全部</el-button>
            <el-button v-if="scope.row.status===0" disabled type="primary" size="small">草稿</el-button>
            <el-button v-if="scope.row.status===1" disabled type="info" size="small">待审核</el-button>
            <el-button v-if="scope.row.status===2" disabled type="success" size="small">审核通过</el-button>
            <el-button v-if="scope.row.status===3" disabled type="warning" size="small">审核失败</el-button>
            <el-button v-if="scope.row.status===4" disabled type="danger" size="small">已删除</el-button>
          </template>
         </el-table-column>
         <el-table-column
           prop="pubdate"
           label="发布时间"
           width="220">
         </el-table-column>
         <el-table-column
           label="操作">
           <template slot-scope="scope">
               <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="primary"
                  circle
                  @click="heditArticle(scope.row.id)"
                  ></el-button>
               <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="hDelarticle(scope.$index,scope.row)"></el-button>
           </template>
    </el-table-column>
</el-table>
      <!-- /数据列表 -->
      <!-- 列表分页 -->
      <el-pagination
        layout="prev, pager, next"
        background
        :current-page.sync="curPage"
        :page-size="10"
        :total="total_count" class="paging"
        @current-change="hPageChange"
        >
      </el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
import { getArticleList, getArticleChanns, delArticle } from '@/api/article'
export default {
  data () {
    return {
      form: {
        status: null,
        channel: null,
        date: null,
        begin_pubdate: '',
        end_pubdate: ''
      },
      curPage: 1, // 当前要查询的页码默认为1
      total_count: 0, // 当前查询能查询带的总条数
      tableData: [], // 文章列表数据
      channels: []
    }
  },
  methods: {
    hPageChange (curPage) {
      // console.log(curPage)
      this.curPage = curPage
      this.hGetList()
    },
    goSearch () {
      this.curPage = 1
      this.hGetList()
    },
    // 文章列表
    hGetList () {
      // 判断日期是否为空
      if (this.form.date === null) {
        this.form.begin_pubdate = ''
        this.form.end_pubdate = ''
      } else {
        this.form.begin_pubdate = this.form.date[0]
        this.form.end_pubdate = this.form.date[1]
      }
      getArticleList({
        // 频道
        channel_id: this.form.channel || null,
        // 起始时间
        begin_pubdate: this.form.begin_pubdate,
        // 结束时间
        end_pubdate: this.form.end_pubdate,
        // 状态
        status: this.form.status,
        // 页码
        page: this.curPage
      }).then(res => {
        // console.log(res)
        // 列表数据
        this.tableData = res.data.data.results
        // 总条数
        this.total_count = res.data.data.total_count
      })
    },
    // 获取频道
    hGetChanels () {
      getArticleChanns().then(res => {
        this.channels = res.data.data.channels
      })
    },
    // 删除文章
    hDelarticle (index, row) {
      delArticle(row.id).then(res => { this.hGetList() })
    },
    // 编辑文章
    heditArticle (id) {
      this.$router.push({
        path: '/editArticle',
        query: {
          id
        }
      })
    }

  },
  mounted () {
    this.hGetList()
    this.hGetChanels()
  }
}
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 10px;
}
.clearfix {
  font-size: 16px;
}
.paging {
  margin-top: 15px;
}
</style>
